<template>
	<view class="cu-card dynamic">
		<action-bar title="账本评论" backTitle="返回首页"></action-bar>
		<!-- 展示区 -->
		<view class="cu-item shadow">
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<view class="cu-avatar round lg img" :style="avatarBgUrl"></view>
					<view class="content flex-sub">
						<view v-text="nickName"></view>
						<view class="text-gray text-sm flex justify-between" v-text="dateFormat(info.account ? info.account.createDate : '')"></view>
					</view>
				</view>
			</view>
			<view class="text-content" v-text="info.account.mark"></view>
			
			<!-- 使用者显示 -->
			<view class="padding flex justify-between align-center">
				<view class="cu-avatar-group">
					<view v-if="info.userList.length < 8" v-for="(item,index) in (8 - info.userList.length)"
						  class="cu-avatar round">
					</view>
					<view v-for="(item,index) in info.userList"
						  :style="'background-image: url(' + item.avatarUrl + ')'"
						  class="cu-avatar round">
					</view>
				</view>
				<view class="text-green"><navigator :url="'./users?bookId=' + book_id" open-type="navigate">查看更多...</navigator></view>
			</view>
			<view class="text-gray text-sm text-right padding">
				<text class="cuIcon-messagefill margin-lr-xs" v-text="info.commentCount"></text>
			</view>
		</view>
		
		<!-- 评论展示区 -->
		<view class="cu-chat margin-top">
			<view v-for="(item, index) in commentList">
				<view v-if="user_id == item.userId" class="cu-item self">
					<view class="text-gray nickname" v-text="item.nickname"></view>
					<view class="main">
						<view class="content shadow bg-red" style="flex-wrap: wrap;" v-text="item.comment"></view>
					</view>
					<view class="cu-avatar radius" :style="'background-image: url(' + item.avatarUrl + ')'"></view>
					<view class="date" v-text="dateFormat(item.updateDate)"></view>
				</view>
				
				<view v-else class="cu-item">
					<view class="cu-avatar radius" :style="'background-image: url(' + item.avatarUrl + ')'"></view>
					<view class="text-gray nickname" v-text="item.nickname"></view>
					<view class="main">
						<view class="content shadow bg-red" style="flex-wrap: wrap;" v-text="item.comment"></view>
					</view>
					<view class="date" v-text="dateFormat(item.updateDate)">
						<a href="#">删除</a>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 添加评论 -->
		<!-- v-model实际上是v-bind:value和v-on:input -->
		<input-bar v-model="inputComment" placeholder="说点什么吧"  buttonName="发送评论" @buttonClick="submit()"></input-bar>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import {dateFormat} from '../../common/dateUtils.js'
	import {buildBgUrl} from '../../common/base.js'
	export default {
		data() {
			return {
				validate: true,		 // 验证参数
				user_id: null,  	 // 用户ID
				book_id: null,		 // 账本ID
				curPage: 1,			 // 当前页
				inputComment: '',	 // 用户输入的评论内容
				commentList: [],	 // 评论列表
				info: {},			 // 账本详细信息
				belong: '', 		 // 账本所属
			}
		},
		computed: {
			// 昵称，头像链接，id
			...mapGetters(['nickName', 'avatarBgUrl', 'id'])
		},
		onLoad(option) {
			this.book_id = option.id
			this.user_id = this.id
			
			// 任何一个变量为空都无法加载页面
			if (this.$anyNull(this.book_id, this.user_id)) {
				this.$message.error('页面初始化失败')
				this.validate = false
			}
			
			if (this.validate) {
				this.curPage = 1
				this.queryCommentsByPage()
				this.queryBookInfo()
			}
		},
		onShow() {
			// if (this.validate) {
			// 	this.curPage = 1
			// 	this.queryCommentsByPage()
			// 	this.queryBookInfo()
			// }
		},
		methods: {
			dateFormat, buildBgUrl,
			/**
			 * 发送评论
			 */
			submit() {
				if (!this.$hasPermission('user:commit')) {
					this.$message.info('没有评论权限')
					return
				}
				
				let words = this.inputComment
				if (words == '') {
					this.$message.info('还没有输入内容哦')
					return
				}
				if (words.length > 32) {
					this.$message.error('输入字数最大为32')
					return
				}
				
				this.$request({
					url: '/comment/save',
					method: 'POST',
					data: {
						id: null,
						userId: this.user_id,
						bookId: this.book_id,
						comment: this.inputComment
					}
				}).then(res => {
					if (res && res.data.code == 200) {
						this.$message.success('发送成功')
						this.inputComment = ''
						// 重新加载数据
						this.curPage = 1
						this.queryCommentsByPage()
					}
				})
			},
			queryCommentsByPage() {
				// url: `/comment/query/page`,
				this.$request({
					url: `/comment/${this.book_id}/pn/${this.curPage}`,
				}).then(res => {
					if (res && res.data.code == 200) {
						let list = this.commentList
						this.commentList = list.concat(res.data.page)
						console.log('commentlist', this.commentList);
					}
				})
			},
			queryBookInfo() {
				// 账本详情
				this.$request({
					url: `/comment/query/info/${this.book_id}`
				}).then(res => {
					console.log(res);
					if (res && res.data.code == 200) {
						this.info = res.data.info
					}
				})
			},
			
		},
		
	}
</script>

<style>
	
	page {
		padding-bottom: 100upx;
	}
	
	.img {
		width: 48rpx;
		height: 48rpx;
	}
	
	.users {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		
	}
	
	.sticky-bottom {
		position: fixed;
		top: 91%;
		padding: 0 !important;
		width: 675rpx;
		
		/* 名称，持续时间，动画速度曲线 */
		animation: commont-show .5s, 100ms;
	}
	
	.flex-row-reverse {
		flex-direction: row-reverse;
	}
	
	.nickname {
		position: absolute;
		top: -15rpx;
		width: 400rpx;
		
		/* 昵称过长隐藏部分名字 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
</style>
